<script lang="ts" setup>
import type { NotificationItem } from '@vben/layouts'

import { computed, ref, watch } from 'vue'

import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui'
import { useWatermark } from '@vben/hooks'
import { createIconifyIcon } from '@vben/icons'
import { BasicLayout, LockScreen, Notification, UserDropdown } from '@vben/layouts'
import { preferences } from '@vben/preferences'
import { useAccessStore, useUserStore } from '@vben/stores'

import EditPasswordForm from '#/components/EditPassword/index.vue'
import { useAuthStore } from '#/store'
import LoginForm from '#/views/_core/authentication/login.vue'
import { $t } from '@vben/locales'

const [FormModal, formModalApi] = useVbenModal({
    connectedComponent: EditPasswordForm
})
const notifications = ref<NotificationItem[]>([
    // {
    //   avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
    //   date: '3小时前',
    //   isRead: true,
    //   message: '描述信息描述信息描述信息',
    //   title: '收到了 14 份新周报',
    // },
    // {
    //   avatar: 'https://avatar.vercel.sh/1',
    //   date: '刚刚',
    //   isRead: false,
    //   message: '描述信息描述信息描述信息',
    //   title: '朱偏右 回复了你',
    // },
    // {
    //   avatar: 'https://avatar.vercel.sh/1',
    //   date: '2024-01-01',
    //   isRead: false,
    //   message: '描述信息描述信息描述信息',
    //   title: '曲丽丽 评论了你',
    // },
    // {
    //   avatar: 'https://avatar.vercel.sh/satori',
    //   date: '1天前',
    //   isRead: false,
    //   message: '描述信息描述信息描述信息',
    //   title: '代办提醒',
    // },
])

const userStore = useUserStore()
const authStore = useAuthStore()
const accessStore = useAccessStore()
const { destroyWatermark, updateWatermark } = useWatermark()
const showDot = computed(() => notifications.value.some((item) => !item.isRead))

const menus = computed(() => [
    {
        handler: () => {
            formModalApi.open()
        },
        icon: createIconifyIcon('carbon:password'),
        text: $t('components.EditPassword.children.editPassword')
    }
])

const avatar = computed(() => {
    return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar
})

const description = computed(() => {
    return userStore.userInfo?.rolesVo.map((v: any) => v.name).join(' | ')
})

async function handleLogout() {
    await authStore.logout(false)
}

function handleNoticeClear() {
    notifications.value = []
}

function handleMakeAll() {
    notifications.value.forEach((item) => (item.isRead = true))
}
watch(
    () => preferences.app.watermark,
    async (enable) => {
        if (enable) {
            await updateWatermark({
                content: `${userStore.userInfo?.username}`
            })
        } else {
            destroyWatermark()
        }
    },
    {
        immediate: true
    }
)
</script>

<template>
    <BasicLayout @clear-preferences-and-logout="handleLogout">
        <template #user-dropdown>
            <UserDropdown
                :avatar
                :description="description"
                :menus
                :text="userStore.userInfo?.realName"
                tag-text=""
                @logout="handleLogout"
            />
        </template>
        <template #notification>
            <Notification
                :dot="showDot"
                :notifications="notifications"
                @clear="handleNoticeClear"
                @make-all="handleMakeAll"
            />
        </template>
        <template #extra>
            <AuthenticationLoginExpiredModal v-model:open="accessStore.loginExpired" :avatar>
                <LoginForm />
            </AuthenticationLoginExpiredModal>
        </template>
        <template #lock-screen>
            <LockScreen :avatar @to-login="handleLogout" />
        </template>
    </BasicLayout>
    <FormModal />
</template>
